<template>
    <div class="panel">
        <div>
            <!-- html结构不写死，可能是h1可能是a也可能是别的标签 -->
            <!-- 使用者传递什么，我就在这里显示什么 -->
            <!-- 所以这时就要用插槽好让用户来自定义 -->

            <!-- 写slot的地方就相当于在这里挖个了槽，调用者填什么，这里就显示什么 -->
            <!-- <slot /> -->
            <!-- 如果你传了就显示你传递的内容 -->
            <!-- 如果你没传，就显示默认内容 -->
            <slot name="title">我是默认内容</slot>
        </div>
        <hr>
        <div>
            <slot name="body">我是第二个槽</slot>
        </div>
        <hr>
        <div>
            <!-- 没有名字的插槽就叫默认插槽 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: ['title']
}
</script>

<style scoped>
/* 默认情况下写的样式都是全局样式，为了让样式只作用于自己加scoped */
.panel {
    width: 480px;
    min-height: 300px;
    border: 1px solid #000;
}
</style>